<script setup lang="ts">
import { getArticleDetailApi } from '@/api/article'
import { onLoad } from '@dcloudio/uni-app'
import type { ArticleItem } from '@/types/article'
import { ref } from 'vue'

// tabs 数据
const orderTabs = ref([
  { orderState: 0, title: '乐促奖开奖说明' },
  // { orderState: 1, title: '幸运奖开奖说明' },
])

// 高亮下标
const activeIndex = ref(0)

onLoad(() => {
  getArticleLecuDetail()
  getArticleXyjDetail()
})

const lecuItem = ref<ArticleItem>()
const getArticleLecuDetail = async () => {
  const res = await getArticleDetailApi('1751198852303593473')
  lecuItem.value = res.data
}

const xyjItem = ref<ArticleItem>()
const getArticleXyjDetail = async () => {
  const res = await getArticleDetailApi('1751203356465995777')
  xyjItem.value = res.data
}
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text
        class="item"
        v-for="(item, index) in orderTabs"
        :key="item.title"
        @tap="activeIndex = index"
      >
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <!-- <view class="cursor" :style="{ left: activeIndex * 50 + 10 + '%' }"></view> -->
      <view class="cursor" :style="{ left: activeIndex * 50 + 35 + '%' }"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
      <!-- 滑动项 -->
      <swiper-item class="scroll_y">
        <view class="example-body">
          <view>
            <rich-text class="uni-text" :nodes="lecuItem?.content" user-select></rich-text>
          </view>
        </view>
        <view class="divider"></view>
        <text class="time">发布时间：{{ lecuItem?.createTime }}</text>
      </swiper-item>
      <!-- 滑动项 -->
      <!-- <swiper-item class="scroll_y">
        <view class="example-body">
          <view>
            <rich-text class="uni-text" :nodes="xyjItem?.content" user-select></rich-text>
          </view>
        </view>
        <view class="divider"></view>
        <text class="time">发布时间：{{ xyjItem?.createTime }}</text>
      </swiper-item> -->
    </swiper>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  padding: 20px;
}
.uni-text {
  font-size: 14px;
  line-height: 22px;
  color: #333;
}
.divider {
  margin: 10px auto;
  height: 1px;
  width: calc(100% - 40px);
  background-color: #eee;
}
.time {
  font-size: 12px;
  color: #999;
  margin: 0 0 0 20px;
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}
.scroll_y{
  overflow-y: scroll;
}

// swiper
.swiper {
  background-color: #f7f7f8;
  overflow-y: scroll;
}
</style>
